<template>
  <view class="search-form">
    <up-form :model="searchForm" labelPosition="top">
      <view class="form-grid">
        <view class="form-item">
          <up-form-item label="客户名称">
            <up-input
              v-model="searchForm.customerName"
              placeholder="请输入客户名称"
              clearable
            ></up-input>
          </up-form-item>
        </view>
        <view class="form-item">
          <up-form-item label="渠道名称">
            <up-input
              v-model="searchForm.channelName"
              placeholder="请输入渠道名称"
              clearable
            ></up-input>
          </up-form-item>
        </view>
        <view class="form-item">
          <up-form-item label="渠道类型" @click="showChannelTypeSelect = true">
            <up-input
              v-model="channelTypeText"
              placeholder="请选择渠道类型"
              clearable
              disabled
              disabledColor="#ffffff"
            ></up-input>
            <template #right>
              <up-icon name="arrow-right"></up-icon>
            </template>
          </up-form-item>
        </view>
        <view class="form-item">
          <up-form-item label="当前阶段" @click="showStageSelect = true">
            <up-input
              v-model="stageText"
              placeholder="请选择阶段"
              clearable
              disabled
              disabledColor="#ffffff"
            ></up-input>
            <template #right>
              <up-icon name="arrow-right"></up-icon>
            </template>
          </up-form-item>
        </view>
      </view>
      <view class="form-buttons">
        <up-button type="primary" @click="handleSearch">查询</up-button>
        <up-button @click="resetSearch">重置</up-button>
      </view>
    </up-form>

    <!-- 渠道类型选择器 -->
    <up-action-sheet
      :show="showChannelTypeSelect"
      :actions="channelTypeOptions"
      title="请选择渠道类型"
      @close="showChannelTypeSelect = false"
      @select="channelTypeSelect"
    ></up-action-sheet>

    <!-- 阶段选择器 -->
    <up-action-sheet
      :show="showStageSelect"
      :actions="stageOptions"
      title="请选择阶段"
      @close="showStageSelect = false"
      @select="stageSelect"
    ></up-action-sheet>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

// 搜索表单
const searchForm = ref({
  customerName: "",
  channelName: "",
  channelType: "",
  currentStage: "",
});

// 选择器显示状态
const showChannelTypeSelect = ref(false);
const showStageSelect = ref(false);

// 渠道类型选项
const channelTypeOptions = [
  { name: "线上", value: 1, type: "success" },
  { name: "线下", value: 2, type: "info" },
  { name: "合作伙伴", value: 3, type: "warning" },
  { name: "直销", value: 4, type: "primary" },
  { name: "代理商", value: 5, type: "danger" },
];

// 阶段选项
const stageOptions = [
  { name: "初步接触", value: 1, type: "info" },
  { name: "需求确认", value: 2, type: "warning" },
  { name: "方案制定", value: 3, type: "primary" },
  { name: "商务谈判", value: 4, type: "success" },
  { name: "合同签订", value: 5, type: "danger" },
];

// 渠道类型文本
const channelTypeText = computed(() => {
  if (!searchForm.value.channelType) return "";
  const item = channelTypeOptions.find(
    (item) => item.value === searchForm.value.channelType
  );
  return item ? item.name : "";
});

// 阶段文本
const stageText = computed(() => {
  if (!searchForm.value.currentStage) return "";
  const item = stageOptions.find(
    (item) => item.value === searchForm.value.currentStage
  );
  return item ? item.name : "";
});

// 渠道类型选择
const channelTypeSelect = (e) => {
  searchForm.value.channelType = e.value;
  showChannelTypeSelect.value = false;
};

// 阶段选择
const stageSelect = (e) => {
  searchForm.value.currentStage = e.value;
  showStageSelect.value = false;
};

// 处理搜索
const handleSearch = () => {
  emit("search", { ...searchForm.value });
};

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm.value).forEach((key) => {
    searchForm.value[key] = "";
  });
  emit("reset");
};

// 声明 emits
const emit = defineEmits(["search", "reset"]);
</script>

<style lang="scss" scoped>
.search-form {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.form-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

@media screen and (max-width: 500px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
</style>
